:root {
                          --gray-light: #1b1d23;
                          --gray-dark: #131519;
                          --gray-darkest: #0d0f11;
                          --brand-coal: #0f0d0e;
                          --brand-charcoal: #231f20;
                          --brand-charcoal-muted: #1b1918;
                          --brand-gray: #262522;
                          --brand-yellow: #fcba28;
                          --brand-pink: #f38ba3;
                          --brand-green: #0ba95b;
                          --brand-purple: #7b5ea7;
                          --brand-beige: #f9f4da;
                          --brand-blue: #12b5e5;
                          --brand-orange: #fc7428;
                          --brand-red: #ed203d;
                          --brand-white: #fff;
                          --red: var(--brand-red);
                          --white: var(--brand-beige);
                          --purple: var(--brand-purple);
                          --black: var(--brand-coal);
                          --blue: var(--brand-blue);
                          --pink: var(--brand-pink);
                          --gold: var(--brand-yellow);
                          --aqua: var(-- brand-blue);
                          --gray: var(--brand-gray);
                          --yellow: var(--brand-yellow);
                          --green: var(--brand-green);
                          --orange: var(--brand-orange);
                          --charcoal: var(--brand-charcoal);
                          --coal: var(--brand-coal);
                      }
                      /* Responsive */
                      
                      @media screen and (max-width:768px) {
                          nav {
                              margin-top: 90px;
                              position: fixed;
                          }
                          .top-cont section {
                              height: auto;
                              position: relative;
                              margin: 8rem 0rem -12rem 4rem;
                              width: 700px;
                              display: flex;
                              justify-content: center;
                              flex-direction: column;
                              background-color: #f9f4da;
                              border-radius: 1rem;
                          }
                          .main-cont section {
                              height: 700px;
                              width: 700px;
                              position: relative;
                              top: 18rem;
                              margin: 20rem 0rem 44rem 4rem;
                              /* display: flex; */
                              /* justify-content: center; */
                              /* flex-direction: column; */
                              border-radius: 1rem;
                              gap: 4rem;
                          }
                          .flex-cont {
                              display: flex;
                              flex-direction: column;
                              /* flex-wrap: wrap; */
                              justify-content: space-around;
                              gap: 3rem;
                              align-items: center;
                              align-content: stretch;
                          }
                          .flex-cont .card {
                              display: flex;
                              flex-direction: column;
                              height: 450px;
                              width: 590px;
                              border-radius: 1rem;
                              background-color: var(--brand-beige);
                              flex-wrap: wrap;
                              justify-content: center;
                              align-items: center;
                          }
                      }
                      /* smartphones */
                      
                      @media screen and (max-width:425px) and (max-width: 767px) {
                          header {
                              margin: 50px;
                              max-width: 425px;
                              justify-content: center;
                          }
                          nav {
                              margin: 0;
                              right: 4rem;
                              height: 60px;
                              width: max-content;
                              position: fixed;
                              display: flex;
                              justify-content: center;
                          }
                          nav ul li {
                              padding: 1rem;
                          }
                          nav ul li a {
                              font-size: 15px;
                          }
                          .top-cont section {
                              height: 440px;
                              margin: 2rem 6rem 0 2rem;
                              width: 392px;
                              display: flex;
                              justify-content: center;
                              flex-direction: column;
                              background-color: #f9f4da;
                              padding: 3rem;
                              border-radius: 1rem;
                          }
                          .top-cont section p {
                              font-family: Inter, sans-serif;
                              color: #0a001a;
                              font-weight: 300;
                              letter-spacing: 0.5px;
                              font-size: 1.1rem;
                              padding-top: 2.5rem;
                              text-align: center;
                              margin: -30px;
                          }
                          .main-cont section {
                              height: 700px;
                              position: absolute;
                              margin: 4rem 0rem 0rem -10rem;
                              top: 53rem;
                              /* display: flex; */
                              /* justify-content: space-between; */
                              /* flex-direction: row; */
                              border-radius: 1rem;
                              /* gap: 19rem; */
                              align-items: center;
                          }
                          .flex-cont {
                              display: flex;
                              flex-direction: column;
                              flex-wrap: wrap;
                              align-items: center;
                              gap: 4rem;
                              position: absolute;
                              right: 3rem;
                          }
                          .flex-cont .card {
                              display: flex;
                              flex-direction: column;
                              height: 350px;
                              width: 448px;
                              border-radius: 1rem;
                              background-color: var(--brand-beige);
                              /* flex-wrap: wrap; */
                              /* align-content: center; */
                              /* justify-content: flex-start; */
                              /* /* align-items: center; */
                          }
                      }
                      /* Floating */
                      
                      @keyframes float {
                          0% {
                              transform: translatey(0px);
                          }
                          50% {
                              transform: translatey(-20px);
                          }
                          100% {
                              transform: translatey(0px);
                          }
                      }
                      /* scroll bar */
                      
                       ::-webkit-scrollbar {
                          display: block;
                          width: 8px;
                          overflow: auto;
                          height: 1em;
                      }
                      
                       ::-webkit-scrollbar-thumb {
                          background: var(--brand-yellow);
                          border-radius: 20px;
                          height: 3rem;
                      }
                      
                       ::-webkit-scrollbar-track {
                          background-color: var(--brand-coal);
                      }
                      
                       ::-webkit-scrollbar-button {
                          display: block;
                          background-color: var(--brand-charcoal);
                          height: 4px;
                      }
                      
                       ::-webkit-scrollbar-corner {
                          background-color: #7f1d1d;
                      }